<template>
    <div class="accountMain">
        <!--账户信息 start-->
        <div class="accountMyInfo">
            <div class="accountMyInfoTop">
                账户余额(元)：<font>50,998.00</font>
                <ul class="clearFix">
                    <li class="recharge"><router-link to="/recharge">充值</router-link></li>
                    <li class="withdraw"><router-link to="/withdraw">提现</router-link></li>
                </ul>
            </div>
            <div class="accountInfoList marginTop40">
                <ul class="clearFix">
                    <li class="ft">
                        <p>
                            总资产(元)
                            <el-tooltip content="总资产=账户余额+待收本金+待收收益" placement="bottom" effect="light" popper-class="myTips">
                                <i class="icon iconfont icon-ic_help"></i>
                            </el-tooltip>
                        </p>
                        <span>60,998.00</span>
                    </li>
                    <li>
                        <p>累计收益(元)</p>
                        <span>8,000.00</span>
                    </li>
                    <li>
                        <p>待收收益(元)</p>
                        <span>1,500.00</span>
                    </li>
                </ul>
            </div>
            <div class="accountInfoBot marginTop30">
                <div class="accountInfoBotCoupon">
                    <ul class="clearFix">
                        <li>
                            <router-link to=""><i class="icon iconfont icon-ic_coupons"></i>抵价券 <font>2</font></router-link>
                        </li>
                        <li>
                            <router-link to=""><i class="icon iconfont icon-ic_interestratecou"></i>抵价券 <font>5</font></router-link>
                        </li>
                    </ul>
                </div>
                <div class="accountInfoBotOpenBox clearFix">
                    <p>自动投资：</p>
                    <div class="openAuto">
                        <el-switch
                                :width="70"
                                active-color="#e95412"
                                inactive-color="#aaa"
                                active-text="已开启"
                                inactive-text="未开启"
                                @click.native="openChange"
                                v-model="isOpen"
                                disabled
                        >
                        </el-switch>
                    </div>
                    <router-link to="">设置</router-link>
                </div>
            </div>
        </div>
        <!--账户信息 end-->
        <!--待收回款 start-->
        <div class="accountWaiting marginTop10">
            <div class="accountWaitingTit">
                <span>待收回款</span>本月回款 <font>3,000.00</font> 元
                <router-link to="">查看更多投资记录 ></router-link>
            </div>
            <recordList></recordList>
        </div>
        <!--待收回款 end-->
    </div>
</template>

<script>
    import recordList from '../include/RecordList.vue'
    export default {
        components: {
            recordList
        },
        data() {
            return {
                isOpen: false
            }
        },
        methods:{
            openChange(){
                if(this.isOpen){
                    this.$confirm('关闭自动投资会导致资金站岗哦！','关闭自动投资确认',{
                        confirmButtonText: '立即关闭',
                        cancelButtonText: '再用用看',
                        cancelButtonClass: 'myCancelButton',
                        confirmButtonClass: 'myConfirmButton',
                        center: true,
                        customClass: 'myMask',
                        closeOnClickModal: true
                    }).then(() => {
                        this.isOpen = false
                    }).catch(() => {
                        this.isOpen = true
                    });
                }else{
                    let theContent = '<ul class="myMaskList">'+
                        '<li><span>投资期限区间：</span><font>不限--不限</font></li>'+
                    '<li><span>每笔最低利率：</span><font>10%</font></li>'+
                    '<li><span>最高投资金额：</span><font>100,00.00元</font></li>'+
                    '<li><span>是否使用优惠券：</span><font>是</font></li>'+
                    '</ul>';
                    this.$alert(theContent,'开启自动投资确认',{
                        showCancelButton: true,
                        confirmButtonText: '立即生效',
                        cancelButtonText: '次日生效',
                        dangerouslyUseHTMLString: true,
                        center: true,
                        customClass: 'myMask',
                        closeOnClickModal: true
                    }).then(() => {
                        this.isOpen = true
                    }).catch(() => {
                        this.isOpen = false
                    });
                }
            }
        }
    };
</script>

<style lang="scss" scoped>
    .accountMain{
        width: 920px;
        .accountMyInfo{
            background: #fff;
            padding: 50px;
            .accountMyInfoTop{
                position: relative;
                font-size: 16px;
                color: #333;
                height: 30px;
                line-height: 30px;
                font{
                    font-size: 24px;
                }
                ul{
                    position: absolute;
                    right: 0;
                    top: 0;
                    li{
                        float: left;
                        width: 78px;
                        height: 28px;
                        line-height: 28px;
                        border-radius: 2px;
                        border: 1px solid #e95412;
                        text-align: center;
                        margin-left: 10px;
                        a{
                            display: block;
                            width: 100%;
                            height: 100%;
                            color: #e95412;
                            &:hover{
                                background: #e95412;
                                color: #fff;
                            }
                        }
                    }
                    li.recharge{
                        background: #e95412;
                        a{
                            color: #fff;
                        }
                    }
                }
            }
            .accountInfoList{
                li{
                    float: left;
                    width: 260px;
                    background: #f9f9f9;
                    padding: 30px 0;
                    text-align: center;
                    color: #333;
                    margin-left: 20px;
                    p{
                        font-size: 16px;
                        margin-bottom: 10px;
                        i{
                            margin-left: 10px;
                        }
                    }
                    span{
                        font-size: 24px;
                    }
                }
                li.ft{
                    margin-left: 0;
                    span{
                        color: #e95412;
                    }
                }
            }
            .accountInfoBot{
                position: relative;
                .accountInfoBotCoupon{
                    li{
                        float: left;
                        font-size: 14px;
                        margin-right: 50px;
                        height: 26px;
                        line-height: 26px;
                        a{
                            color: #999;
                            i{
                                margin-right: 10px;
                                font-size: 16px;
                            }
                            font{
                                color: #e13a3a;
                                font-size: 16px;
                            }
                            &:hover{
                                color: #e13a3a;
                            }
                        }
                    }
                }
                .accountInfoBotOpenBox{
                    position: absolute;
                    right: 0;
                    top: 0;
                    z-index: 2;
                    font-size: 16px;
                    color: #999;
                    line-height: 24px;
                    p{
                        float: left;
                    }
                    .openAuto{
                        float: left;
                        margin-left: 10px;
                        margin-right: 15px;
                        padding-right: 15px;
                        height: 24px;
                        position: relative;
                        &:after{
                            content: '';
                            width: 1px;
                            height: 16px;
                            background: #dfdfdf;
                            position: absolute;
                            right: 0;
                            top: 5px;
                        }
                    }
                    a{
                        float: left;
                        color: #333;
                        line-height: 24px;
                        &:hover{
                            color: #e95412;
                        }
                    }
                }
            }
        }
        .accountWaiting{
            background: #fff;
            padding: 50px;
            .accountWaitingTit{
                height: 30px;
                font-size: 16px;
                color: #999;
                position: relative;
                margin-bottom: 20px;
                span{
                    font-size: 20px;
                    color: #000;
                    margin-right: 15px;
                }
                font{
                    color: #000;
                }
                a{
                    position: absolute;
                    right: 0;
                    top: 0;
                    font-size: 14px;
                    color: #999;
                    &:hover{
                        color: #e95412;
                    }
                }
            }
        }
    }
</style>
<style lang="scss">
    .el-tooltip__popper.myTips{
        border: 1px solid #f5ea91;
        background: #fffef6;
        color: #bb6c33;
    }
    .el-tooltip__popper.myTips[x-placement^=bottom] .popper__arrow{
        border-bottom-color: #f5ea91;
    }
    .tipsOfPlan{
        line-height: 24px;
    }
    .openAuto{
        .el-switch{
            height: 26px;
            line-height: 26px;
            position: relative;
            display: block;
            .el-switch__label{
                position: absolute;
                left: 0;
                top: 0;
                z-index: 5;
                width: 82%;
                line-height: 24px;
                font-size: 12px;
                display: none;
            }
            .el-switch__label.is-active{
                display: block;
                color: #fff;
            }
            .el-switch__label--left{
               text-align: right;
                margin-right: 0;
                padding-right: 18%;
            }
            .el-switch__label--right{
                text-align: left;
                margin-left: 0;
                padding-left: 18%;
            }
            .el-switch__core{
                height: 24px;
                border-radius: 12px;
                display: block;
            }
            .el-switch__core .el-switch__button{
                top: 3px;
            }
            .el-switch__label *{
                font-size: 12px;
            }
        }
        .el-switch.is-disabled{ opacity: 1;}
        .el-switch.is-disabled .el-switch__core, .el-switch.is-disabled .el-switch__label{ cursor: pointer; }
    }
    .el-message-box__wrapper{ outline: none;}
    .myMask{
        .el-message-box__title{
            display: block;
            font-size: 16px;
            text-align: left;
            border-bottom: 1px solid #dfdfdf;
            height: 30px;
            color: #333;
        }
        .el-message-box__message{
            padding: 20px 0;
            color: #333;
        }
        .myMaskList{
            li{
                position: relative;
                margin-bottom: 10px;
                span{
                    float: left;
                    width: 160px;
                    text-align: right;
                    display: block;
                    color: #999;
                }
                font{
                    float: left;
                    display: block;
                    margin-left: 40px;
                }
                &:after{
                    content: '';
                    width: 0;
                    height: 0;
                    display: block;
                    clear: both;
                    visibility: hidden;
                }
            }
        }
        .el-button{
            border: 1px solid #e95412;
            color: #e95412;
        }
        .el-button--primary{
            background-color: #e95412;
            border-color: #e95412;
            color: #fff;
            margin-left: 20px;
        }
        .el-button:hover{
            background-color: #ffe7dc;
        }
        .el-button--primary:hover{
            background-color: #e95412;
        }
        .myCancelButton{
            background-color: #e95412;
            border-color: #e95412;
            color: #fff;
            &:hover{
                background-color: #e95412;
            }
        }
        .myConfirmButton{
            border: 1px solid #e95412;
            color: #e95412;
            background: #fff;
            &:hover{
                background-color: #ffe7dc;
                color: #e95412;
            }
        }
    }
    .el-message-box--center .el-message-box__header{
        padding-top: 20px;
    }
</style>